<template>
  <transition
    name="dialog-fade"
    @after-enter="afterEnter"
    @after-leave="afterLeave"
  >
    <div class="dialog">
      <div class="model"></div>
      <div class="dialog-head">{{ title }}</div>
      <div class="dialog-body">
        <slot></slot>
      </div>
      <div class="dialog-foot">
        <slot name="foot"></slot>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  data() {
    return {
      title: '标题',
    };
  },
  methods: {
    afterEnter() {
      this.$emit('opened');
    },
    afterLeave() {
      this.$emit('closed');
    },
  },
};
</script>

<style scoped>
* {
  padding: 0;
  margin: 0;
}
.dialog {
  position: relative;
  z-index: 999;
}
.model {
  position: fixed;
  width: 100vw;
  height: 100vh;
  background: #000;
  opacity: 0.3;
  top: 0;
  left: 0;
  z-index: 1;
}
</style>